@(usuarioForm: Form[Usuarios])
@implicitField = @{FieldConstructor(campo.f)}
@import helper._ 
@main("Novo usuário"){

<meta charset="utf-8" />

<div class="panel panel-default">
	@form(action=routes.UsuarioCRUD.gravar(), 'class -> "form-horizontal"){
	<div class="panel-body">
		<fieldset>
			<legend>Informações pessoais</legend>

			@inputText(usuarioForm("nome"), '_label -> "Nome:", 'class ->
						"form-control", 'id -> "nome", '_col -> "col-lg-4")

			@inputText(usuarioForm("dataNascimento"), '_label -> "Data de nascimento:",
						'class -> "form-control", 'id -> "dt", '_col ->	"col-lg-2")
			 
			@inputText(usuarioForm("rg"), '_label -> "RG:", 'class -> "form-control",
						'id -> "rg", '_col -> "col-lg-2")

			@inputText(usuarioForm("cpf"), '_label -> "CPF:", 'class ->	"form-control",
						'id -> "cpf", '_col -> "col-lg-2")

		</fieldset>

		<fieldset>
			<legend>Contatos</legend>
			@inputText(usuarioForm("telefone"), '_label -> "Telefone:", 'class -> "form-control",
						'id -> "fone", '_col -> "col-lg-2")

			@inputText(usuarioForm("email"), '_label -> "E-mail:", 'class -> "form-control",
						'id -> "email", '_col -> "col-lg-6")
		</fieldset>

		<fieldset>
			<legend>Endereço</legend>

			<label for="cidade" class="col-lg-2 control-label">Cidade:</label>
			<div class="col-lg-4">
				<select class="form-control" id="cidade">

				</select>
			</div>

			<label for="estado" class="col-lg-2 control-label">Estado:</label>
			<div class="col-lg-4">
				<select class="form-control" id="estado">

				</select>
			</div>

			@inputText(usuarioForm("cep"), '_label -> "CEP:", 'class -> "form-control",
						'id -> "cep", '_col -> "col-lg-2")

			@inputText(usuarioForm("rua"), '_label -> "Rua:", 'class -> "form-control",
						'id -> "rua", '_col -> "col-lg-6")

			@inputText(usuarioForm("numero"), '_label -> "Número:", 'class -> "form-control",
						'id -> "numero", '_col -> "col-lg-2")

			@inputText(usuarioForm("bairro"), '_label -> "Bairro:", 'class -> "form-control",
						'id -> "bairro", '_col -> "col-lg-4")
		</fieldset>

		<fieldset>
			<legend>Dados de acesso</legend>

			<div class="form-group">
				<label for="login" class="col-lg-2 control-label">Login:</label>
				<div class="col-lg-4">
					<input type="text" class="form-control" id="login">
				</div>
			</div>

			<div class="form-group">
				<label for="senha" class="col-lg-2 control-label">Senha:</label>
				<div class="col-lg-4">
					<input type="text" class="form-control" id="senha">
				</div>
			</div>

			<div class="form-group">
				<label for="rSenha" class="col-lg-2 control-label">Repetir a
					senha:</label>
				<div class="col-lg-4">
					<input type="text" class="form-control" id="rSenha">
				</div>
			</div>

			<div class="form-group">
				<label for="permissao" class="col-lg-2 control-label">Permissão:</label>
				<div class="col-lg-4">
					<select class="form-control" id="permissao">

					</select>
				</div>
			</div>
		</fieldset>

	</div>
	<div class="panel-footer">
		<fieldset>
			<a href="#" class="btn btn-success pull-right" style="width: 110px;">Salvar</a>
			<a href="/usuario/listagem_usuarios"
				class="btn btn-default pull-right"
				style="width: 110px; margin-right: 10px;">Cancelar</a>
		</fieldset>
	</div>
	}
</div>

<script type="text/javascript">
	jQuery(function($) {
		$("#dt").mask("99/99/9999");
		$("#cpf").mask("999.999.999-99");
		$("#fone").mask("(99) 9999-9999?9", {
			placeholder : " "
		});
		$("#cep").mask("99999-999");
		$("#rg").mask("9999999?999", {
			placeholder : " "
		});
	});
</script>

}
